<template>
  <div v-loading="loading" class="good_management">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-row>
        <el-col :span="8" :gutter="8">
          <el-form-item label="商品名称">
            <el-input
              v-model="searchForm.goodsName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :gutter="8">
          <el-form-item label="副商品名">
            <el-input
              v-model="searchForm.subGoodsName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :gutter="8">
          <el-form-item label="所属商家">
            <el-input
              v-model="searchForm.belongs"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :gutter="8">
          <el-form-item label="所属地区">
            <el-cascader
              v-model="searchForm.locationId"
              placeholder="请选择"
              :props="regionsProps"
              :show-all-levels="false"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="btn_group">
          <el-button @click="onReset">重置</el-button>
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="tool_bar">
      <span></span>
      <span class="add_btn">
        <el-button type="primary" @click="onOpenAddGoodsDialog"
          >增加商品</el-button
        >
      </span>
    </div>
    <div class="result">
      <el-table :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column type="index" width="50" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="subGoodsName" label="副商品名" />
        <el-table-column prop="location.locationName" label="所属地区" />
        <el-table-column prop="belongs" label="所属商家" />
        <el-table-column prop="indexFilePath" label="主页图片" show-overflow-tooltip />
        <el-table-column prop="operator" label="操作" width="400">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="onEdit(scope.row, 'edit')"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="onEdit(scope.row, 'editFile')"
            >
              文件
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="onEdit(scope.row, 'editLabel')"
            >
              标签
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="onEdit(scope.row, 'editPrice')"
            >
              定价
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="onDelete(scope.row.id.toString())"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pager.currentPage"
        v-model:page-size="pager.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, ->, prev, pager, next, jumper, sizes"
        :total="pager.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <goods-dialog
      v-model:show="dialogShow"
      :param="editParam"
      @refresh="onSearch"
    ></goods-dialog>
    <label-dialog
      v-model:show="labelDialogShow"
      :param="labelEditParam"
      @refresh=""
    ></label-dialog>
    <price-dialog
      v-model:show="priceDialogShow"
      :param="priceEditParam"
      @refresh=""
    ></price-dialog>
    <file-dialog
      v-model:show="fileDialogShow"
      :param="fileEditParam"
      @refresh="onSearch"
    ></file-dialog>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {
  selectGoodsPage,
  deleteGoods,
  selectLocationPage,
  selectSubLocations,
} from "@/network/api";

import GoodsDialog from "./components/GoodsDialog.vue";
import LabelDialog from "./components/LabelDialog.vue";
import PriceDialog from "./components/PriceDialog.vue";
import FileDialog from "./components/FileDialog.vue";

const searchForm = reactive({
  goodsName: "",
  subGoodsName: "",
  locationId: "",
  belongs: "",
});

const dialogShow = ref(false);
const editParam = ref(null);
const labelDialogShow = ref(false);
const labelEditParam = ref(null);
const priceDialogShow = ref(false);
const priceEditParam = ref(null);
const fileDialogShow = ref(false);
const fileEditParam = ref(null);
const pager = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});

const loading = ref(false);

const regionsProps = {
  checkStrictly: true,
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node;
    console.log(node, level);
    if (level === 0) {
      selectLocationPage({
        current: 1,
        size: 1000,
      }).then((res) => {
        if (res?.data?.records?.length > 0) {
          resolve(
            res.data.records
              .filter((i) => !i.parent)
              .map((i) => {
                return {
                  value: i.id.toString(),
                  label: i.locationName,
                  leaf: false,
                };
              })
          );
        } else {
          resolve([]);
          //node.isLeaf = true;
        }
      });
    } else {
      selectSubLocations({
        parentId: node.value,
      }).then((res) => {
        if (res?.data?.length > 0) {
          resolve(
            res.data.map((i) => {
              return {
                label: i.locationName,
                value: i.id.toString(),
                leaf: false,
              };
            })
          );
        } else {
          resolve([]);
          //node.isLeaf = true;
        }
      });
    }
  },
};
const tableData = ref([]);
const onReset = () => {
  searchForm.goodsName = "";
  searchForm.subGoodsName = "";
  searchForm.locationId = "";
  searchForm.belongs = "";
  onSearch();
};
const onSearch = () => {
  pager.currentPage = 1;
  requestData();
};

const handleSizeChange = (size) => {
  pager.pageSize = size;
  pager.currentPage = 1;
  requestData();
};
const handleCurrentChange = (cur) => {
  pager.currentPage = cur;
  requestData();
};

const requestData = () => {
  loading.value = true;
  selectGoodsPage({
    belongs: searchForm.belongs,
    current: pager.currentPage,
    goodsName: searchForm.goodsName,
    subGoodsName: searchForm.subGoodsName,
    locationId: searchForm.locationId[searchForm.locationId.length - 1] || null,
    size: pager.pageSize,
  })
    .then((res) => {
      if (res?.data) {
        pager.total = res.data.total;
        tableData.value = res.data.records || [];
      } else {
        pager.total = 0;
        tableData.value = [];
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const onOpenAddGoodsDialog = () => {
  dialogShow.value = true;
  editParam.value = null;
};
const onEdit = (row, type) => {
  switch (type) {
    case "edit": {
      dialogShow.value = true;
      editParam.value = {
        ...row,
      };
      break;
    }
    case "editLabel": {
      labelDialogShow.value = true;
      labelEditParam.value = {
        ...row,
      };
      break;
    }
    case "editPrice": {
      priceDialogShow.value = true;
      priceEditParam.value = {
        ...row,
      };
      break;
    }
    case "editFile": {
      fileDialogShow.value = true;
      fileEditParam.value = {
        ...row,
      };
      break;
    }
  }
};
const onDelete = (id) => {
  deleteGoods({
    goodsId: id,
  }).then((res) => {
    if (res?.code === 200) {
      // 删除成功
      ElMessage({
        message: "delete success",
        type: "success",
      });
      onSearch();
    } else {
      // 删除失败
      ElMessage({
        message: "delete failed",
        type: "error",
      });
    }
  });
};
onMounted(() => {
  onSearch();
});
</script>
<style lang="scss" scoped>
.good_management {
  .btn_group {
    text-align: center;
  }
  .tool_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .result {
    margin-top: 12px;
  }
  :deep(.el-pagination) {
    width: 100%;
    margin: 10px 0 12px;
  }
}
</style>
